<template>
	<view>
		<view class="page">
			<view class="cearte-bed">
				<view class="cearte-bed-hd">
					床位号创建
				</view>
				<view class="cearte-bed-bd">
					<view class="cearte-bed-flex flex-center">
						<view class="flex_bd item">
							<u-input v-model="value1" placeholder="首字母" />
						</view>
						<view class="flex_bd item">
							<u-input v-model="value2" placeholder="测试病区" />
						</view>
					</view>
				</view>
			</view>
			<view class="u-wrap">
				<view class="u-title">
					增加{{val1}}个床位[{{val2}}]床位[{{val3}}]
				</view>
				<view class="u-flex flex-center">
					<view class="u-flex__item flex_bd">
						床位(开始)
					</view>
					<view class="u-flex__item flex_bd">
						增加数量
					</view>
					<view class="u-flex__item flex_bd">
						类型
					</view>
				</view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="list" @change="bindChange"
					class="picker-view" indicator-class="indicatorClass">
					<picker-view-column>
						<view class="item" v-for="(item,index) in department" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in partition" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in status" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="u-group">
				<button type="default" class="btn cancel-btn">取消</button>
				<button type="default" class="btn confirm-btn">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:'',
				value2:'',
				department: ["1", "2", "3", "4", "5", "6", "7"],
				partition: ["1", "2", "3", "4", "5", "6", "7"],
				status: ["临时", "固定"],
				val1: '1',
				val2: '固定',
				val3: '1',
				visible: true,
				list:[],
				indicatorStyle: `height: 70rpx;border-top:1px solid #bdddf8;border-bottom:1px solid #bdddf8`
			}
		},
		onLoad() {

		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.val1 = this.department[val[0]];
				this.val2 = this.status[val[1]];
				this.val3 = this.partition[val[2]];
				console.log(val)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		padding: 20rpx 30rpx;
	}

	.u-wrap {

		.u-title {
			text-align: center;
			color: #248ee8;
			font-size: 32rpx;
			line-height: 50rpx;
			margin-bottom: 20rpx;
		}

	
		.picker-view {
			height: 400rpx;

			.item {
				// height: 70rpx;
				line-height: 66rpx;
				font-size: 34rpx;
				align-items: center;
				justify-content: center;
				text-align: center;
				color: #248ee8;
			}
		}
	}

	.u-group {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;

		.btn {
			width: 260rpx;
			height: 70rpx;
			border-radius: 35rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			padding: 0;
			margin: 0 40rpx;
		}

		.btn::after {
			display: none;
		}

		.cancel-btn {
			background-color: #fff;
			color: #248ee8;
			border: 1px solid #248ee8;
		}

		.confirm-btn {
			background-color: #248ee8;
			color: #fff;
			border: 1px solid #248ee8;
		}
	}

	.cearte-bed {
		margin-bottom: 60rpx;

		.cearte-bed-hd {
			font-size: 30rpx;
			color: #3f4344;
		}

		.cearte-bed-flex {
			.item {
				.u-input {
					width: 260rpx;
					border-bottom: 1rpx solid #cfcfcf;
				}
			}
		}
	}
	
	.u-flex{
		font-size: 28rpx;
		color: #3f4247;
		background-color: #f6f7fb;
		border-radius: 12rpx;
		text-align: center;
		
		.u-flex__item{
			padding: 20rpx;
			line-height: 40rpx;
			position: relative;
		}
		
		.u-flex__item::after{
			position: absolute;
			content: '';
			right: 0;
			top: 50%;
			width: 1rpx;
			height: 30rpx;
			background-color: #dddee2;
			margin-top: -15rpx;
		}
		
		.u-flex__item:last-child::after{
			display: none;
		}
	}
</style>
